<template>
  <div class="input-box">
    <div class="sixNumber">
      <!-- <el-input class="itemInSix" type="number" ref="num1" @keyup="loseBlur('1')" v-model="num11" />
      <el-input class="itemInSix" type="number" @keyup="loseBlur('2')" v-model="num22" ref="num2" />
      <el-input class="itemInSix" type="number" @keyup="loseBlur('3')" v-model="num33" ref="num3" />
      <el-input class="itemInSix" type="number" @keyup="loseBlur('4')" v-model="num44" ref="num4" />
      <el-input class="itemInSix" @keyup="loseBlur('5')" type="number" v-model="num55" ref="num5" />
      <el-input class="itemInSix" @keyup="loseBlur('6')" type="number" v-model="num66" ref="num6" /> -->

      <el-input class="itemInSix" type="number" ref="num1" @input="loseBlur('1')" v-model="num11" />
      <el-input class="itemInSix" type="number" @input="loseBlur('2')" v-model="num22" ref="num2" />
      <el-input class="itemInSix" type="number" @input="loseBlur('3')" v-model="num33" ref="num3" />
      <el-input class="itemInSix" type="number" @input="loseBlur('4')" v-model="num44" ref="num4" />
      <el-input class="itemInSix" @input="loseBlur('5')" type="number" v-model="num55" ref="num5" />
      <el-input class="itemInSix" @input="loseBlur('6')" type="number" v-model="num66" ref="num6" />
      <!-- 清空 -->
      <el-button @click="clearAllNumber" type="info" circle>
        <el-icon><RefreshLeft /></el-icon>
      </el-button>
      <!-- <el-button @click="clearAllNumber">重置</el-button> -->
    </div>
    <div class="safe-footer">
      <el-row><el-button @click="toGoogleBindLogin" type="primary">登錄</el-button></el-row>
      <el-row><el-button @click="backPage">返回上一步</el-button></el-row>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, computed } from 'vue'
import { RefreshLeft } from '@element-plus/icons-vue'
import { useEmitt } from '@/hooks/web/useEmitt'
import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    RefreshLeft
  },

  // components: {
  //   RefreshLeft
  // },
  // eslint-disable-next-line vue/require-prop-types
  props: ['data'],
  emits: {
    // 传回父级数据
    getBackInfo: (value) => {
      return value
    }
  },
  setup(props, content) {
    const { emitter } = useEmitt()
    const numberState = reactive({
      // 调用父级绑定事件getBackInfo,返回长度为6的拼接值;
      getMemInfo() {
        content.emit('getBackInfo', numberState.pd)
      },
      //返回上一界面
      backPage() {
        emitter.emit('backPage')
      },
      toGoogleBindLogin() {
        emitter.emit('toBindLogin', numberState.pd)
        // console.log(numberState.pd)
      },
      pd: computed(() => {
        // 拼接输入的所有小格子输入为一个值;
        let pass =
          '' +
          (numberState.num11 ?? '') +
          (numberState.num22 ?? '') +
          (numberState.num33 ?? '') +
          (numberState.num44 ?? '') +
          (numberState.num55 ?? '') +
          (numberState.num66 ?? '')
        return pass
      }),
      // ref绑定值
      num1: null,
      num2: null,
      num3: null,
      num4: null,
      num5: null,
      num6: null,
      // v-model值
      num11: undefined,
      num22: undefined,
      num33: undefined,
      num44: undefined,
      num55: undefined,
      num66: undefined,
      loseBlur(id) {
        // backspace删除小格子内容为空白时
        if (!numberState['num' + id + id] && numberState['num' + id + id] !== 0) {
          numberState['num' + id + id] = undefined
          return
        }

        if (typeof numberState['num' + id + id] === 'string') {
          //替换所有非数字为空
          numberState['num' + id + id] = numberState['num' + id + id].replace(/\D/g, '')
          numberState['num' + id + id] = numberState['num' + id + id].split('')[0]
            ? numberState['num' + id + id].split('')[0]
            : undefined
          goFocus()
        } else {
          //替换所有非数字为空
          numberState['num' + id + id] = numberState['num' + id + id].toString().replace(/\D/g, '')
          numberState['num' + id + id] = numberState['num' + id + id].toString().split('')[0]
            ? numberState['num' + id + id].toString().split('')[0]
            : undefined
          goFocus()
        }
        function goFocus() {
          // 空白不聚焦下一个
          if (!numberState['num' + id + id]) {
            return false
          }
          // 聚焦下一个
          let number = null
          if (Number(id) < 6) {
            number = Number(id) + 1
            let indexAA = 'num' + number
            numberState[indexAA].focus()
          } else {
            number = 6
            let indexAA = 'num' + number
            numberState[indexAA].blur()
          }
        }
      },
      clearAllNumber() {
        numberState.num11 = undefined
        numberState.num22 = undefined
        numberState.num33 = undefined
        numberState.num44 = undefined
        numberState.num55 = undefined
        numberState.num66 = undefined
        numberState['num1'].focus()
      }
    })
    return {
      ...toRefs(numberState)
    }
  },
  data() {
    return {}
  },
  watch: {
    pd: {
      // 小格子数值变更 同步传递数值到父组件;
      handler: function (val) {
        console.log(val)
        wsCache.set('googleCode', val) //用撇账id
        // this.getMemInfo()
      }
    },
    // 如果父级传来回显密码
    data: {
      handler: function (val) {
        if (val) {
          let string = ''
          if (typeof val === 'number') {
            string = val.toString()
          } else {
            string = val
          }
          let arr = string.split('')
          arr.forEach((item, index) => {
            this['num' + (index + 1) + (index + 1)] = Number(item)
          })
        }
      },
      immediate: true
    }
  },
  created() {},
  methods: {}
}
</script>
<style scoped>
.sixNumber {
  display: flex;
  align-items: center;
  width: 430px;
}
.sixNumber .itemInSix {
  margin: 0 2px;
}
:deep(input[type='number']) {
  -moz-appearance: textfield;
}

:deep(input) {
  border: none;
}
:deep(.sixNumber input::-webkit-outer-spin-button),
:deep(.sixNumber input::-webkit-inner-spin-button) {
  -webkit-appearance: none;
}
:deep(.sixNumber input[type='number']) {
  -moz-appearance: textfield;
}

:deep(.sixNumber input) {
  border: none;
  text-align: center;
  font-size: 18px;
}
:deep(.el-input__wrapper) {
  width: 50px;
  height: 50px;
}
.el-row {
  width: 100%;
  margin-bottom: 20px;
}
.safe-footer .el-button {
  width: 100%;
  /* height: 50px; */
}
.safe-footer {
  width: 430px;
  margin-top: 10px;
}
</style>
